﻿<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ZhuaBa-Register</title>

    <!-- begin::global styles -->
    <link rel="stylesheet" href="../static/assets/vendors/bundle.css" type="text/css">
    <!-- end::global styles -->

    <!-- begin::custom styles -->
    <link rel="stylesheet" href="../static/assets/css/app.css" type="text/css">
    <!-- end::custom styles -->
    <script type="text/javascript">
        function myFunction()
        {
            if([[${flag}]]!=null){
                alert("用户名或邮箱已被占用！");
            }
        }
    </script>
</head>
<body class="bg-white h-100-vh p-t-0" onload="myFunction()">

<!-- begin::page loader-->
<div class="page-loader">
    <div class="spinner-border"></div>
    <span>Loading ...</span>
</div>
<!-- end::page loader -->

<div class="p-b-50 d-block d-lg-none"></div>

<div class="container h-100-vh">
    <div class="row align-items-md-center h-100-vh">
        <div class="col-lg-6 d-none d-lg-block">
            <img class="img-fluid" src="../static/assets/media/svg/register.svg" alt="...">
        </div>
        <div class="col-lg-4 offset-lg-1">
            <h3 >ZhuaBa-Register</h3>
            <p th:text="#{register.tip}">Create a new account</p>
            <form action="/RegisterController" method="post">
                <div class="form-group mb-4">
                    <input type="text" class="form-control form-control-lg" name="Username" th:placeholder="#{register.username}" autofocus placeholder="Username">
                </div>
                <div class="form-group mb-4">
                    <input type="password" class="form-control form-control-lg" name="Password" th:placeholder="#{register.password}" placeholder="Password">
                </div>
                <div class="form-group mb-4">
                    <input type="text" class="form-control form-control-lg" name="Email" id="email"th:placeholder="#{register.email}" placeholder="Email">
                    <a id="email2" style="color: red"></a>
                </div>
                <script>
                    email.onchange = function(){
                        var email = this.value;
                        var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                        if(reg.test(email)){
                        }else{
                            document.getElementById("email2").innerText="邮箱格式不正确";
                        }
                    }
                </script>
                <div class="form-group">
                    <div class="custom-control custom-switch">
                        <input type="checkbox" class="custom-control-input" id="customSwitch" checked="">
                        <label class="custom-control-label" for="customSwitch" th:text="#{register.agree}">I agree to the Terms and Privacy.</label>
                    </div>
                </div>
                <button class="btn btn-primary btn-lg btn-block btn-uppercase mb-4" th:text="#{register.create}" type="submit">Create Account</button>
                <p class="text-right">
                    <a href="/" class="text-underline" th:text="#{register.already}">Already a user?</a>
                </p>
            </form>
        </div>
    </div>
</div>
</body>

<!-- begin::global scripts -->
<script src="../static/assets/vendors/bundle.js"></script>
<!-- end::global scripts -->

<!-- begin::custom scripts -->
<script src="../static/assets/js/app.js"></script>
<!-- end::custom scripts -->

</body>
</html>